import React from 'react';
import {inject, observer} from 'mobx-react';
import {Spin, Table, Radio} from 'antd';
import {WeaSelect, WeaPopoverHrm,WeaLocaleProvider} from 'ecCom';

import * as Util from '../../../util/Util';
const toJS = mobx.toJS;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const getLabel = WeaLocaleProvider.getLabel;
const getUserLanguage= WeaLocaleProvider.getUserLanguage;
@inject ('planReportDiagramStore')
@observer
export default class PersonView extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      _height: Util.getCurrentHeight (),
      tags: [
        {name: getLabel('220','草稿') , color: '#e1dba8'},
        {name: getLabel('19134','审批中'), color: '#268de4'},
        {name: getLabel('236','退回'), color: '#e51616'},
        {name: getLabel('23774','已完成'), color: '#49c930'},
        {name: getLabel('508873','无数据'), color: '#666666'},
      ],
        month : [
          getLabel(25825, '1月'),
          getLabel(25826, '2月'),
          getLabel(25827, '3月'),
          getLabel(25828, '4月'),
          getLabel(25829, '5月'),
          getLabel(25830, '6月'),
          getLabel(25831, '7月'),
          getLabel(25832, '8月'),
          getLabel(25833, '9月'),
          getLabel(25834, '10月'),
          getLabel(25835, '11月'),
          getLabel(25836, '12月'),
      ]
    };
    this.store = this.props.planReportDiagramStore;
  }

  compare = prop => {
    return function (obj1, obj2) {
      var val1 = obj1[prop];
      var val2 = obj2[prop];
      if (val1 < val2) {
        return -1;
      } else if (val1 > val2) {
        return 1;
      } else {
        return 0;
      }
    };
  };

  getNameALink = (resourceid, resourcename) => {
    let href = 'javaScript:openhrm(' + resourceid + ');';
    return (
      <a href={href} onClick={e => window.pointerXY (e)} class="autoWrap">
        {resourcename}
      </a>
    );
  };
  getColumns = () => {
    let columns = [
      {
        title: getLabel('30042','人员') ,
        dataIndex: 'lastname',
        key: 'lastname',
      // fixed: 'left',
        width: '100px',
        render: (text, record, index) => {
          return (
            <a
              href={'javaScript:openhrm(' + record.id + ');'}
              onClick={e => window.pointerXY (e)}
              class="autoWrap"
            >
              {text}
            </a>
          );
        },
      },
      {
        title: getLabel('33553','分部') ,
        dataIndex: 'subcompanyname',
        key: 'subcompanyname',
      //  fixed: 'left',
        width: '120px',
      },
      {
        title: getLabel('27511','部门'),
        dataIndex: 'departmentname',
        key: 'departmentname',
      //  fixed: 'left',
       width: '120px',
      },
    ];

    let {personTableDatas,language} = this.store;
    personTableDatas = toJS (personTableDatas);
    let dataLength = Object.keys (
      personTableDatas[0] ? personTableDatas[0] : {}
    ).length;

    let _this = this;
    let isWeek = this.store.dateType == '2';
    // let rowWidth = (70 + dataLength * 5) / dataLength + '%';
    let rowWidth='50px'

    //周数需要倒序排列，
    let tempWeekArray = [];
    for (let v in personTableDatas[0]) {
      let title;
      if (isWeek) {
        if(language==8){
          title ='week ' +v.replace ('week', '');
        }else{
          title =  v.replace ('week', '') + '周';
        }
      } else {
        if(language==8){
          let monthNum = parseInt(v.replace ('month', ''));
          title=this.state.month[monthNum-1]
        }else{
           title =  v.replace ('month', '') + '月';
        }

      }

      if (v.startsWith ('week') || v.startsWith ('month')) {
        tempWeekArray.push ({
          title: title,
          dataIndex: v,
          key: v,
          sortIndex: parseInt (v.replace (/[^0-9]/g, '')),
          width: rowWidth,
          render: (text, record, index) => {
            switch (text) {
              case '0':
                return _this.getTag ('', '#e1dba8');
              case '1':
                return _this.getTag ('', '#268de4');
              case '2':
                return _this.getTag ('', '#e51616');
              case '3':
                return _this.getTag ('', '#49c930');
              default:
                return _this.getTag ('', '#666666');
            }
          },
        });
      }
      if (v.startsWith ('rate')) {
        tempWeekArray.push ({
          title: getLabel('30447','完成率'),
          dataIndex: v,
          key: v,
          sortIndex: 999,
         width: "70px",
          render: (text, record, index) => {
            return text;
          },
        });
      }
    }

    if (!isWeek && tempWeekArray.length > 0) {
      tempWeekArray.sort (this.compare ('sortIndex'));
    }

    while (tempWeekArray.length > 0) {
      isWeek
        ? columns.push (tempWeekArray.pop ())
        : columns.push (tempWeekArray.shift ());
    }

    return columns;
  };

  getTableConfig = d => {
    const personTableDatas = toJS (this.store.personTableDatas);
    let tableLength = Object.keys (
      personTableDatas[0] ? personTableDatas[0] : {}
    ).length;
    let columns = this.getColumns ();
    return {
      columns,
      dataSource: personTableDatas,
      bordered: true,
      // scroll: {x: 100 + tableLength * 5 + '%', y: this.state._height - 260},
      scroll: {x:'100%', y: this.state._height - 265},
      className: 'wea-workrelate-antd-table',
      pagination: this.getPagination (),
    };
  };

  getPagination = () => {
    const {personPage} = this.store;
    return {
      pageSize: personPage.pageSize,
      total: personPage.total,
      onChange: this.onPageChange,
      onShowSizeChange:this.onShowSizeChange,
      current: personPage.pageNum,
      showSizeChanger:true,
      showQuickJumper:true,
      pageSizeOptions:[10,20,50,100],
      showTotal: ((total) => {
        return  getLabel(509103, `共{total}条`).replace('{total}', total);
      }),
    };
  };

  onPageChange = (page, pageSize) => {
    this.store.personPage.pageNum = page;
    // this.store.personPage.pageSize = pageSize;
    this.store.planWorkerReportDiagram ();
  };
  onShowSizeChange=(current, size)=>{
    this.store.personPage.pageNum=1
    this.store.personPage.pageSize = size;
    this.store.planWorkerReportDiagram ();
  }

  rowSelection = () => {
    return {
      selectedRowKeys: this.selectedRowKeys,
    };
  };

  getTag = (name, color = 'red') => {
    return (
      <div className="tag">
        <div className={'tag-circle'} style={{backgroundColor: color}} />
        <span className={'title'}>{name}</span>
      </div>
    );
  };
  getTagList () {
    return (
      <div>
        {this.state.tags.map ((v, i) => {
          return this.getTag (v.name, v.color);
        })}
      </div>
    );
  }

  getRadioGroup = () => {
    let _this = this;
    return {
      defaultValue: _this.store.dateType,
      buttonStyle: 'solid',
      onChange: e => {
        _this.store.dateType = e.target.value;
        _this.store.planWorkerReportDiagram ();
      },
    };
  };

  onYearSelectChange = e => {
    this.store.dateValue.year = e;
    this.store.planWorkerReportDiagram ();
  };

  render () {
    const personTableDatas = toJS (this.store.personTableDatas);
    let {moreSearchValues, loading,titlename} = this.store;
    let _this = this;
    return (
      <div className="persion-view">

        <div className="date-select">
          <div className="year-select">
            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@912tgh`}
            value={this.store.dateValue.year}
              options={this.store.yearSelectData}
              onChange={this.onYearSelectChange}
            />
          </div>
          <div className="date-type">
            <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@8xzn4t`} {...this.getRadioGroup ()}>
              <RadioButton ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@bdymsf`} value="1">{getLabel('33452','月')}</RadioButton>
              <RadioButton ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@76i22z`} value="2">{getLabel('1926','周')}</RadioButton>
            </RadioGroup>
          </div>
          {titlename}
          {/* {this.store.dateValue.year}
          {getUserLanguage()==8?"": getLabel('26577','年') }
          {this.store.dateType == '1' ?  getLabel('33452','月') : getLabel('1926','周')}
          {getLabel('509004','工作计划报告')} */}
          <div className="table-header">
            <div className="tags">
              {this.getTagList ()}
            </div>

          </div>
        </div>

        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@r8akqs`} spinning={loading}>
          <div className="person-table">
            <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@75prhb`} {...this.getTableConfig (personTableDatas)} />
          </div>
        </Spin>
        <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@4u69qa`} />
      </div>
    );
  }
}
